<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>添加科室</title>
    <link rel="stylesheet" href="../../../layui/css/layui.css">
    <script src="../../../layui/layui.js"></script>
</head>
<body style="background-color:#fff;">

<div class="layui-fluid">

    <!-- 添加科室表单 start -->
    <form class="layui-form" id="addForm" style="display: none;padding: 10px 10px 10px 10px"> <!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->
        <div class="layui-form-item">
            <label class="layui-form-label">科室名称</label>
            <div class="layui-input-block">
                <input type="text" name="name" placeholder="请输入" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">办公室电话</label>
            <div class="layui-input-block">
                <input type="text" name="telephone" placeholder="请输入" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">所在区域</label>
            <div class="layui-input-block">
                <input type="text" name="area" placeholder="请输入" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="addFilter">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
    <!-- 添加科室按钮 -->
    <button type="button" class="layui-btn" id="addButton">添加科室</button>
    <!-- 条件搜索 -->
    <div class="layui-row">
        <form class="layui-form layui-form-pane" id="searchForm" lay-filter="searchFormFilter">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <div class="layui-input-inline">
                        <input type="text" name="name" autocomplete="off"
                               placeholder="请填写科室名称"
                               class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <button class="layui-btn layui-btn-sm" id="searche" lay-submit="" lay-filter="searchFilter">搜索</button>
                </div>
            </div>
        </form>
    </div>
    <!-- 展示科室  -->
    <div class="layui-row">
        <table class="layui-hide" id="myTable" lay-filter="tableFilter"></table>
    </div>

</div>
<!-- 头部工具栏 -->
<script type="text/html" id="toolbarDemo">
    <button class="layui-btn layui-btn-sm" id="deleteSelected" lay-event="deleteSelected">删除选中</button>
</script>
<!-- 操作工具栏 编辑、删除按钮 -->
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="upd">
        <i class="layui-icon layui-icon-edit"></i>
        修改</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs"
       style="background-color: #d9534f;" lay-event="del">
        <i class="layui-icon layui-icon-delete"></i>
        删除</a>
</script>
<!-- 修改科室表单 -->
<form class="layui-form" id="updateForm" lay-filter="updateFormFilter" style="display: none;padding: 10px 10px 10px 10px"> <!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->
    <div class="layui-form-item">
        <label class="layui-form-label">科室名称</label>
        <div class="layui-input-block">
            <input type="hidden" name="did"/>
            <input type="text" name="name" placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">办公室电话</label>
        <div class="layui-input-block">
            <input type="text" name="telephone" placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">所在区域</label>
        <div class="layui-input-block">
            <input type="text" name="area" placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="updateFilter">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>


<script>
    layui.use(['layer', 'form', 'table'], function () {
        var $ = layui.$;
        var form = layui.form;
        var table = layui.table;
        var layer = layui.layer;
        //添加按钮
        $("#addButton").click(function () {
            //弹出添加页面
            layer.open({
                type:1,
                title:'添加页面',
                area:'500px',
                content:$('#addForm')
            })
        })
        //添加科室表单提交
        form.on('submit(addFilter)', function () {
            $.ajax({
                url:'/springboot-hospital/department/add',
                data:$('#addForm').serialize(),
                success:function (result) {
                    if(result.flag){
                        layer.msg('添加成功');
                        layer.closeAll();
                        $('#addForm')[0].reset();
                        table.reload('myTable');
                    }
                }
            })
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });

        //搜索科室表单提交
/*        form.on('submit(searchFilter)', function (data) {
            console.log(data.elem); //被执行事件的元素DOM对象，一般为button对象
            console.log(data.form); //被执行提交的form对象，一般在存在form标签时才会返回
            console.log(data.field); //当前容器的全部表单字段，名值对形式：{name: value}
            //根据条件重新渲染表格
            table.reload('myTable', {
                url: '/springboot-hosptial/department/showDepartment'
                , where: {"name": data.field.name} //设定异步数据接口的额外参数
            });
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });*/
        $('#searche').click(function () {
            table.reload('myTable',{
                where:{
                    name:$('#name').val()
                },
                page:{
                    curr:1
                }
            })
        })

        //渲染科室数据
        table.render({
            elem: '#myTable' //指定原始表格元素选择器（推荐id选择器）
            , url: '/springboot-hospital/department/show'
            , toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
            , page: true //开启分页
            , limit:4
            ,limits:[4,5,6]
            , cols: [[
                {type: 'checkbox', fixed: 'left'},  //选择框
                {field: 'did', title: '编号', sort: true},
                {field: 'name', title: '名称'},
                {field: 'telephone', title: '办公室电话'},
                {field: 'area', title: '所在区域'},
                {fixed: 'right', title: '操作', toolbar: '#barDemo', width: 160}
            ]] //设置表头

        });
        //监听头工具栏事件 批量删除
        /*table.on('toolbar(tableFilter)', function (obj) {
            var checkStatus = table.checkStatus(obj.config.did);
            switch (obj.event) {
                case 'deleteSelected':
                    //获取选中的行数据
                    var data = checkStatus.data;
                    //定义一个数组用于存放科室id
                    var dids = [];
                    $.each(data, function (index, rowData) {
                        dids[index] = rowData.did;
                    });
                    if(checkStatus.data.length==0){
                        layer.msg('请至少选择一个要删除的数据');
                        return;
                    }
                    //执行删除操作
                    $.ajax({
                        url:'/springboot-hospital/department/removeAny',
                        data:'dids='+dids,
                        success:function (result) {
                            if(result.flag){
                                layer.msg('删除成功');
                                table.reload('myTable')
                            }else{
                                layer.msg('选中的科室下还有医生或患者信息，无法删除！')
                            }
                        }
                    })
                    break;
            }
        });*/
        $('#deleteSelected').click(function () {
            //layui文档的数据table组件右侧菜单的基础方法中，有个获取选中行
            var checkStatus = table.checkStatus('myTable'); //myTable 即为基础参数（表格） id 对应的值
            console.log(checkStatus.data) //获取选中行的数据
            console.log(checkStatus.data.length) //获取选中行数量，可作为是否有选中行的条件
            console.log(checkStatus.isAll ) //表格是否全选
            //首先，判断是否选择至少一个数据
            if(checkStatus.data.length==0){
                layer.msg('请至少选择一个要删除的数据');
                return
            }
            //确定要删除的数据（即要传递参数）
            var dids = [];
            for(var i=0;i<checkStatus.data.length;i++){
                dids.push(checkStatus.data[i].did);
            }
            //最后 请求批量删除方法
            $.ajax({
                url:'/springboot-hospital/department/removeAny',
                data:'dids='+dids,
                success:function (result) {
                    if(result.flag){
                        layer.msg('删除成功');
                        table.reload('myTable')
                    }else{
                        layer.msg('选中的科室下还有医生或患者信息，无法删除！')
                    }
                }
            })
        })

        //监听行工具事件
        table.on('tool(tableFilter)', function (obj) {
            var data = obj.data;
            console.log(obj)
            if (obj.event === 'del') {
                layer.confirm('真的删除么', function (index) {
                    $.ajax({
                        url:'/springboot-hospital/department/remove',
                        data:'did='+obj.data.did,
                        success:function (result) {
                            if(result.flag){
                                layer.msg('删除成功');
                                table.reload('myTable')
                            }else{
                                layer.msg('该科室下还有医生或患者信息，无法删除！')
                            }
                        }
                    })
                    layer.close(index);
                });
            } else if (obj.event === 'upd') {
                layer.open({
                    type:1,
                    title:'修改页面',
                    area:'500px',
                    content:$('#updateForm')
                })
                //回显页面
                $.ajax({
                    url:'/springboot-hospital/department/getOne',
                    data:'did='+obj.data.did,
                    success:function (result) {
                        form.val('updateFormFilter',{
                            did:result.did,
                            name:result.name,
                            telephone:result.telephone,
                            area:result.area
                        })
                    }
                })
                //提交修改页面数据
                form.on('submit(updateFilter)',function () {
                    $.ajax({
                        url:'/springboot-hospital/department/update',
                        data:$('#updateForm').serialize(),
                        success:function (result) {
                            if(result.flag){
                                layer.msg('修改成功');
                                layer.closeAll();
                                table.reload('myTable');
                            }
                        }
                    })
                    return false;
                })
            }
        });

    })
</script>
</body>
</html>
